<template>
    <section class="smartResourceManageForm">
  		<el-form :model="ruleForm" 
  			label-position="left"
  			 ref="ruleForm" 
  			label-width="180px" class="demo-ruleForm">
  			
  		<el-form-item label="所属网段 :" >
		    <!--<el-input v-model="ruleForm.name"></el-input>-->
		    {{ruleForm.name}}
		</el-form-item>	
		<el-form-item label="使用区域 :" >
		    <!--<el-input v-model="ruleForm.area"></el-input>-->
		     {{ruleForm.areaId}}
		</el-form-item>	
  		<el-form-item label="生成Docker副本条件 :" required>
  			<div class="Desker_div">
  				<span class="desker_span">CPU使用率</span>
  				  大于&nbsp;<el-input style="width: 160px;" v-model="ruleForm.onCpuUsed"></el-input>&nbsp;%
  			</div>
		  	<div class="Desker_div">
		  		<span class="desker_span">内存使用率</span>
  				  大于&nbsp;<el-input style="width: 160px;" v-model="ruleForm.onMemoryUse"></el-input>&nbsp;%
  			</div>
  			<div class="Desker_div">
  				<span class="desker_span">生成Docker副本个数</span>
  				  <el-input style="width: 120px;" v-model="ruleForm.min"></el-input>&nbsp;至
  				  <el-input style="width: 120px;" v-model="ruleForm.max"></el-input>&nbsp;个
  			</div>
  		</el-form-item>	
		<el-form-item label="通知运维人员条件(任一条件) :" required>
			 <el-checkbox  v-model="ruleForm.eventType" label="1" border>Docker挂掉</el-checkbox >
    		 <el-checkbox  v-model="ruleForm.eventType" label="2" border>Docker副本生成失败</el-checkbox >
		</el-form-item>	
		<el-form-item label="通知方式 :" required>
			 <el-checkbox  v-model="ruleForm.notifyTypes" label="1" border>系统通知</el-checkbox >
    		 <el-checkbox  v-model="ruleForm.notifyTypes" label="2" border>邮件通知</el-checkbox >
		</el-form-item>	
        </el-form>
		<p style="text-align: right;">
			  <el-button type="primary" plain @click="submit">提交</el-button>
		</p>       
    </section>
</template>

<script>
    
    export default {
    	props:{
    		id:Number,
    		areaInfo:Object,
    		scope:Object,
    	},
        data() {
          return {
          		ruleForm:{
          			id:0,
          			name:'',
          			areaName:"",
          			areaId:'',
          			onCpuUsed:'',
          			onMemoryUse:'',
          			min:'',
          			max:'',
          			eventType:[],
          			notifyTypes:[],
          		}
          };
        },
        methods: {
        		submit(){
        			this.$emit('submitForm',this.ruleForm);
        		},
        		dealSubmit(){
        			this.ruleForm.name = this.areaInfo.name;
		        	this.ruleForm.areaName = this.areaInfo.areaName
		        	this.ruleForm.areaId = this.areaInfo.areaId
        		}
        },
        mounted(){
        	this.ruleForm.name = this.areaInfo.name;
        	this.ruleForm.areaName = this.areaInfo.areaName
        	this.ruleForm.areaId = this.areaInfo.areaId
        	console.log(this.scope);
        	if(this.scope.row.areaDockerStrategy!=null){
        		this.ruleForm.id = this.scope.row.areaDockerStrategy.id;
        		this.ruleForm.onCpuUsed = this.scope.row.areaDockerStrategy.onCpuUsed;
        		this.ruleForm.onMemoryUse = this.scope.row.areaDockerStrategy.onMemoryUse;
        		this.ruleForm.min = this.scope.row.areaDockerStrategy.min;
        		this.ruleForm.max = this.scope.row.areaDockerStrategy.max;
        		this.ruleForm.eventType =  this.scope.row.areaDockerStrategy.eventType==3?['1','2']:this.scope.row.areaDockerStrategy.eventType.split(',');
        		this.ruleForm.notifyTypes = this.scope.row.areaDockerStrategy.notifyTypes.split(',');
        	}else{
        			this.ruleForm.id = 0;
        	}
        },
        watch:{
        	areaInfo:{
        		handler(newVal,oldVal){
        			Object.assign(this.$data, this.$options.data());
        			this.ruleForm.name = newVal.name
		        	this.ruleForm.areaName = newVal.areaName
		        	this.ruleForm.areaId = newVal.areaId
		        	if(this.scope.row.areaDockerStrategy!=null){
			        		this.ruleForm.id = this.scope.row.areaDockerStrategy.id;
			        		this.ruleForm.onCpuUsed = this.scope.row.areaDockerStrategy.onCpuUsed;
			        		this.ruleForm.onMemoryUse = this.scope.row.areaDockerStrategy.onMemoryUse;
			        		this.ruleForm.min = this.scope.row.areaDockerStrategy.min;
			        		this.ruleForm.max = this.scope.row.areaDockerStrategy.max;
			        		this.ruleForm.eventType =  this.scope.row.areaDockerStrategy.eventType==3?['1','2']:this.scope.row.areaDockerStrategy.eventType.split(',');
			        		this.ruleForm.notifyTypes = this.scope.row.areaDockerStrategy.notifyTypes.split(',');
			        	}else{
			        		this.ruleForm.id = 0;
			        }
        		},
        		deep:true
        	},
        }
  };
</script>

<style scoped="scoped">
	section.smartResourceManageForm {
	    padding-right: 40px;
	}
	section.smartResourceManageForm span.desker_span {
	    margin-right: 25px;
	}
	section.smartResourceManageForm .Desker_div{
		margin: 15px 0 ;
	}
</style>